<template>
    <div>
        <el-tabs>
            <el-tab-pane label="产品">
                <el-form :model="product" ref="product" label-width="110px" style="overflow:hidden">
                    <el-form-item label="产品名称" prop="productName" class="inline__" :rules="{required: true, message: '请输入产品名称'}">
                        <el-input v-model="product.productName" placeholder></el-input>
                    </el-form-item>
                    <el-form-item label="产品品牌" prop="productBrand" class="inline__" :rules="{required: true, message: '请输入产品品牌'}">
                        <el-input v-model="product.productBrand" placeholder></el-input>
                    </el-form-item>
                    <el-form-item  label="产品分类" prop="proClassily" class="inline__" :rules="{required: true, message: '请选择产品分类'}">
                        <el-select value-key="proClassilyId" v-model="product.proClassily" placeholder="请选择产品分类">
                            <el-option v-for="i in classilyList" :key="i.proClassilyId" :label="i.proClassilyName" :value="i"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <el-form :model="proDetails" ref="proDetails" label-width="110px" style="overflow:hidden">
                    <el-form-item label="产品售价" prop="proPrice" class="inline__"
                     :rules="[{ required: true, message: '请输入产品售价'},{ type: 'number', message: '产品售价必须为数字值'}]">
                        <el-input v-model.number="proDetails.proPrice" placeholder></el-input>
                    </el-form-item>
                    <el-form-item label="是否上架" prop="proOn" class="inline__">
                        <el-select placeholder="请选择是否上架" v-model="proDetails.proOn">
                            <el-option v-for="i in selectData" :label="i.label" :value="i.value" :key="i.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品图片" prop="proImgSrc" class="inline__" v-if="proDetails.proImgSrc">
                        <el-image :src="proDetails.proImgSrc" style="width:60px;height:60px" ></el-image><br/>
                        <el-input :readonly="true" placeholder style="line-height:38px;">
                            <el-tag @close="close_tag(file)" type="info" closable slot="prefix" v-for="file in flieList" :key="file.uid">{{ file.name }}</el-tag>
                            <el-upload multiple slot="append"  action="upload" :show-file-list="false" :on-success="upload_success" v-if="flieList.length==0">
                                <el-button size="small">点击上传新图片</el-button>
                            </el-upload>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="产品图片" prop="proImgSrc" class="inline__" v-if="!proDetails.proImgSrc">
                        <el-input :readonly="true" placeholder style="line-height:38px">
                            <el-tag @close="close_tag(file)" type="info" closable slot="prefix" v-for="file in flieList" :key="file.uid">{{ file.name }}</el-tag>
                            <el-upload multiple slot="append"  action="upload" :show-file-list="false" :on-success="upload_success" v-if="flieList.length==0">
                                <el-button size="small">点击上传图片</el-button>
                            </el-upload>
                        </el-input>
                    </el-form-item>
                    <el-form-item style="margin-left:130px;">
                        <el-button type="primary" @click="addProduct('product')">保存</el-button>
                        <el-button @click="cancel">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="产品属性">
                <el-button class="is-top" size="small" @click="openAddAttribute"><i class="iconfont icon-jiahao" > 添加属性</i></el-button>
                <el-table  :data="attributeList">
                    <el-table-column prop="attributeName" label="属性名称" align="center"></el-table-column>
                    <el-table-column prop="abilityName" label="属性值" align="center"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="s">
                            <el-button size="mini" type="danger" icon="el-icon-delete" circle @click="delete_attr(s.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <!--添加属性-->
        <el-dialog v-dialogDrag :visible.sync="addAttributeVisible" width="50%" :modal="false" :close-on-click-modal="false" >
            <add_attribute></add_attribute>
        </el-dialog>
    </div>
</template>

<script>
    import add_attribute from "./add_attribute";

    export default {
        name: 'add_product',
        components:{
            add_attribute
        },
        data() {
            return {
                //产品分类的数据
                classilyList: [],
                //添加产品属性弹框状态
                addAttributeVisible:false,
                //新增产品属性数据
                attributeList:[],
                abilities:[],
                //新增产品数据
                product:{
                    productId:0,
                    productName:'',
                    productBrand:'',
                    proClassily:'',
                    proDetails:[],
                },
                proDetails:{
                    proDetailId:0,
                    proPrice:'',
                    proOn:0,
                    proNum:0,
                    proImgSrc:'',
                    wareNum:0,
                    abiCens:[]
                },
                //产品是否上架数据
                selectData:[{value:1,label:'是',},{value:0,label:'否'}],
                //文件上传数据
                flieList:[],
            };
        },
        methods: {
            //产品分类查询
            get_classily(){
                this.axios.get("api/product/only-classily").then(v=>{
                    this.classilyList=v.data;
                }).catch()
            },
            //打开添加属性弹框
            openAddAttribute(){
                this.$store.dispatch("setVueAddProduct",this);
                this.addAttributeVisible=true;
            },
            //取消新增
            cancel(){
                this.clear();
                this.$store.state.vueProduct.addproductVisible = false;
            },
            //删除属性
            delete_attr(row){
                this.global.confirm("提示","确认删除？",
                    () => {
                        this.abilities.splice(this.abilities.indexOf(row),1)
                        this.attributeList.splice(this.attributeList.indexOf(row),1)
                        this.global.mes_success("删除成功")
                    },() => {
                        this.global.mes_message("取消删除")
                    })
            },
            //清空数据
            clear(){
                this.flieList=[]
                this.attributeList=[]
                this.abilities=[]
                this.product={
                    productId:0,
                    productName:'',
                    productBrand:'',
                    proClassily:'',
                    proDetails:[],
                },
                this.proDetails={
                    proDetailId:0,
                    proPrice:'',
                    proOn:0,
                    proNum:0,
                    proImgSrc:'',
                    wareNum:0,
                    abiCens:[]
                }
            },
            //删除文件
            close_tag(file){
                this.flieList.splice(this.flieList.indexOf(file),1)
            },
            //文件上传成功函数
            upload_success(response,file,flie_list){
                this.flieList = flie_list
            },
            //表单提交,新增产品
            addProduct(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //处理文件url
                        if (this.flieList.length>0){
                            let str = ""
                            this.flieList.forEach(file => {
                                str += file.response + ","
                            })
                            this.proDetails.proImgSrc=str.substring(0, str.lastIndexOf(","));
                        }
                        let proDetail={
                            proDetailId:0,
                            proPrice:'',
                            proOn:0,
                            proNum:0,
                            proImgSrc:'',
                        }
                        proDetail.proDetailId=this.proDetails.proDetailId
                        proDetail.proNum=this.proDetails.proNum
                        proDetail.proImgSrc=this.proDetails.proImgSrc
                        proDetail.proOn=this.proDetails.proOn
                        proDetail.proPrice=this.proDetails.proPrice
                        this.abilities.forEach(i=>{
                            let abiCen={
                                prodetail:{
                                    proDetailId:0,
                                    proPrice:'',
                                    proOn:0,
                                    proNum:0,
                                    proImgSrc:'',
                                },
                                ability:{}
                            }
                            abiCen.ability=i
                            abiCen.prodetail=proDetail
                            this.proDetails.abiCens.push(abiCen);
                        })
                        this.product.proDetails.push(this.proDetails);
                        this.$axios.post("api/product/add_product",this.product).then(() => {
                            if(this.$store.state.vueProduct.get_product){
                                this.$store.state.vueProduct.currPage=1;
                                this.$store.state.vueProduct.get_product(1);
                            }else {
                                this.$store.state.vueProduct.detailData.product.productId = this.product.productId;
                                this.$store.state.vueProduct.detailData.product.proClassily = this.product.proClassily;
                                this.$store.state.vueProduct.detailData.product.productName = this.product.productName;
                                this.$store.state.vueProduct.detailData.product.productBrand = this.product.productBrand;
                                this.$store.state.vueProduct.detailData.proDetailId = this.proDetails.proDetailId;
                                this.$store.state.vueProduct.detailData.proPrice = this.proDetails.proPrice;
                                this.$store.state.vueProduct.detailData.proOn = this.proDetails.proOn;
                                this.$store.state.vueProduct.detailData.proNum = this.proDetails.proNum;
                                this.$store.state.vueProduct.detailData.proImgSrc = this.proDetails.proImgSrc;
                                this.$store.state.vueProduct.detailData.abilities=this.abilities
                            }
                            //清空表单
                            this.clear();
                            this.global.mes_success("新增成功");
                            this.$store.state.vueProduct.addproductVisible = false;
                        }).catch()
                    } else {
                        this.global.mes_warning("请正确填写产品信息")
                        return false;
                    }
                });
            }
        },
        created(){
            this.get_classily();
        }
    }
</script>
<style scoped>
    .el-select{width: 100%!important;}
    .inline__{width:90%!important;display:inline-block}
</style>